<script setup lang="ts" name="video-overivew">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  computed,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElTree } from "element-plus";
import {
  getCameraVideoUrl,
  getCameraList_,
  getAllCameraList_,
  getFullDeptTree_,
  getUserVideoUrl,
} from "@/api/server_video";
import mp401 from "@/assets/image/video.mp4";
const conciseCameraList = ref<any[]>([]);
const cameraCarousel = ref();

const conciseCamera = ref<any>({
  page: 1,
  pageSize: 20,
});

const getCameraList = async () => {
  /* 实时监控 */
  let res = await getCameraList_({
    ...conciseCamera,
  });
  conciseCameraList.value = res.list;
};


const videoCount = ref(12);
const page = computed(() => {
  return Math.ceil(conciseCameraList.value.length / videoCount.value);
});
const getPageList = (page: number) => {
  let start = (page - 1) * videoCount.value;
  let end = page * videoCount.value;
  return conciseCameraList.value.slice(start, end);
};
const videoCountChange = () => {
  cameraCarousel.value.setActiveItem(0);
};

// 视频弹窗
const video1 = ref<any>(null);
const dialogVisible = ref(false)
const dialogitem = ref<any>({})


const openVideo = (item:any) => {
   dialogVisible.value = true
  // Bus.$emit("openVideo", {});
  dialogitem.value = item
  console.log('item',dialogitem.value);
  
};
const closevideo = () => {
  video1.value.pause();
  
};

onMounted(() => {
  getCameraList();
});
</script>

<template>
  <div class="video_overview-page">
    <app-box class="video_list-block" title="视频概览">
      <template #more>
        画面展示个数
        <el-select
          v-model="videoCount"
          @change="videoCountChange"
          style="width: 80px"
          placeholder="Select"
        >
          <el-option
            v-for="item in [4, 12, 20, 30]"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </template>
      <div class="video_lists" v-if="conciseCameraList.length">
        <el-carousel
          class="carousel-box"
          indicator-position="none"
          :interval="50000"
          ref="cameraCarousel"
          arrow="always"
        >
          <el-carousel-item
            v-for="p in page"
            :key="p"
            :class="['video_list video_list_' + videoCount]"
          >
            <div
              class="video_item-block"
              v-for="item in getPageList(p)"
              :key="item"
            >
              <div class="video_item" @click="openVideo(item)">
                <div style="width: 100%">
                  <video
                    src="http://192.168.16.125:30/公司推流10/10.live.mp4"
                    style="width: 100%"
                  ></video>
                  <div class="screen-img">
                    <svg-icon
                      icon-class="play"
                      color="#d8d8d8"
                      style="width: 30px; height: 30px"
                    ></svg-icon>
                  </div>
                </div>
                <div class="screen-name">
                  <span></span>
                  <span>{{ item.camera_name }}</span>
                </div>
              </div>


              
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </app-box>
  </div>

  <el-dialog :close-on-click-modal="true" @close="closevideo"
    custom-class="app-video-dialog" 
    v-model="dialogVisible"
    title="视频播放"
    width="850px"
  >
    <div class="app-video">
      <div style="font-size: 16px;">摄像头名称：{{dialogitem.camera_name}}</div>
      <video ref="video1"
        controls
        webkit-playsinline=""
        poster=""
        src="http://192.168.16.125:30/公司推流10/10.live.mp4"
      ></video>
    </div>
  </el-dialog>

</template>

<style lang="scss">
.video_overview-page {
  width: 100%;
  height: 100%;
  .video_list-block {
    width: 100%;
    height: 100%;

    .video_lists {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      
      .video_item {
        width: 100%;
        height: 100%;
        border: 1px solid #3a4659;
        cursor: pointer;
        position: relative;
        .screen-img {
          position: absolute;
          top: 50%;
          left: 45%;
          // background: red;
        }
        .screen-name {
          height: 30px;
          line-height: 30px;
          color: #bcc9d4;
          font-size: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 5px;
          background: #0d2233;
        }
      }
      .video_item-block {
        padding: 10px;
        margin-bottom: 40px;
        float: left;
      }
      .video_list_4 .video_item-block {
        height: 50%;
        width: 50%;
      }
      .video_list_12 .video_item-block {
        height: 33%;
        width: 25%;
      }
      .video_list_20 .video_item-block {
        height: 25%;
        width: 20%;
      }
      .video_list_30 .video_item-block {
        height: calc(100% / 6);
        width: 20%;
      }
    }
  }
  .carousel-box {
    width: 100%;
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__arrow {
      background: #1a90ff80;
    }
  }
}

</style>
